<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img  :src="headerSrc" style="height: 80px" alt="">
      </div>
      <span class="logo dataTime showTime">
       {{nowTime}}
      </span>
      <span class="title" style="font-size: xx-large" >
        <a href="#" style="text-decoration: none; color: #D3DCE6">肉牛大数据平台</a>
      </span>
      <div class="title-right">
        <el-button type="primary" round @click="VchangClick1">返回首页</el-button>

        <!--        <span class="dataTime showTime"> {{nowTime}}</span>-->
<!--        <el-button type="primary" round @click="changClick">返回</el-button>-->
      </div>
    </header>
    <video :preload="preload"
           :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"
           :autoplay="autoplay">
      <source :src="videoSrc" type="video/mp4">
    </video>
  </div>
</template>

<script>
import { getThemeValue } from '@/utils/theme_utils'
import { mapState } from 'vuex'
import niu from '@/assets/img/niu.mp4'
import bg from '@/assets/img/bg1.jpg'
import view1 from '@/assets/img/view1.png'

export default {
  name: 'ViewPage',
  data () {
    return {
      // 定义每一个图表的全屏
      nowTime:null,
      //视频
      videoSrc: niu,
      videoImg: bg,
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false,
      width: '100%', // 设置视频播放器的显示宽度（以像素为单位）
      height: '90%', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: '',
      testValus: null,
    }
  },
  methods: {
    VchangClick1(){
      this.$router.push('/ScreenPage')
    },
   /* changClick (){
      this.$router.push('/Screen')
    },
    handleChangeTheme () {
      this.$router.push('/Screen')
    },*/
    getTime () {
      var that=this;
      console.log("运行了");
      var t = null;
      // 1秒等于1000毫秒
      t = setTimeout(time,1000);
      function time() {
        clearTimeout(t);
        var dt = new Date(); //获取未解析的时间
        var yyyy = dt.getFullYear(); //获取年
        var MM = dt.getMonth() +1; //获取月
        var dd = dt.getDate(); //获取日
        var HH = dt.getHours(); //获取时
        var mm = dt.getMinutes(); //获取分
        var ss = dt.getSeconds(); //获取秒
        that.nowTime = yyyy+"年"+MM+"月"+dd+"日"+" "+HH+"时"+mm+"分"+ss+"秒";
        t = setTimeout(time,1000);
      }
    }
  },
  computed: {
    /*VchangClick1(){
      this.$router.push('/ScreenPage')
    },*/
  /*  VchangClick (){
      this.$router.push('/dgw/bree').catch(reason => {
      })
    },*/
    headerSrc () {
      return  getThemeValue(this.theme).headerBorderSrc
    },
    themeSrc () {
      return view1
    },
    containerStyle () {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  mounted() {
    this.getTime();

  }
}
</script>
<!--<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 100% ;
  margin: 0 ;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}

.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;

  > div {
    img {
      width: 100%;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }

  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }

  //按钮颜色
  .el-button&#45;&#45;primary{
    background: #2c2b31;
    margin-top: 15px;
  }

  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }

  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);

    img {
      height: 35px;
      width: 128px;
    }
  }
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>-->

